import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/widgets/common/jzx_network_image_view.dart';
import 'package:country_picker/country_picker.dart';

import 'controller.dart';

class JzxEditProfileView extends GetView<JzxEditProfileController> {
  const JzxEditProfileView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(),
      body: Column(
        children: [
          SizedBox(height: kStatusBarHeight + 99.w),
          InkWell(
            onTap: () {
              controller.pickerImage(context);
            },
            child: Stack(
              children: [
                Obx(() => JzxNetworkAssets(
                      controller.user.value.avatarUrl,
                      width: 98.w,
                      radius: 1000,
                      border: Border.all(color: Colors.white, width: 2),
                    )),
                // Positioned(
                //   right: 5,
                //   bottom: 0,
                //   child: Assets.images.icHomtTop.image(width: 28.w),
                // ),
              ],
            ),
          ),
          JzxGaps.h32,
          _Cell(controller.nickname, 'Nick Name'),
          JzxGaps.h20,
          _Cell(
            controller.birthday,
            'Date of Birth',
            onTap: () {
              showDatePicker(
                context: context,
                locale: const Locale('en', 'US'),
                initialDate: DateTime.now(),
                firstDate: DateTime(1900),
                lastDate: DateTime.now(),
              ).then((value) {
                if (value != null) {
                  if (value.year > DateTime.now().year - 18) {
                    showMessage("Can't be under 18 years old");
                    return;
                  }

                  controller.birthday.text = value.toString().substring(0, 10);
                  controller.buttonEnbale();
                }
              });
            },
          ),
          JzxGaps.h20,
          _Cell(
            controller.country,
            'Country',
            onTap: () {
              showCountryPicker(
                context: context,
                exclude: ['CN'],
                showPhoneCode: false,
                // useSafeArea: true,
                countryListTheme: CountryListThemeData(
                  bottomSheetHeight: 500.w,
                ),
                onSelect: (Country country) {
                  controller.country.text = country.name;
                  controller.buttonEnbale();
                },
              );
            },
          ),
          JzxGaps.h145,
          InkWell(
            onTap: () {
              controller.updateProfile();
            },
            child: Obx(() => Opacity(
                  opacity: !controller.enable.value ? 0.5 : 1,
                  child: Assets.images.icSubmit.image(width: double.infinity),
                )),
          ),
        ],
      ).backgroud(Assets.images.normalBgv),
    );
  }
}

class _Cell extends GetView<JzxEditProfileController> {
  const _Cell(
    this.textCtrl,
    this.hint, {
    super.key,
    this.onTap,
  });

  final TextEditingController textCtrl;
  final String hint;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      margin: EdgeInsets.symmetric(horizontal: 32.w),
      decoration: BoxDecoration(
        color: const Color(0x26FFFFFF),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          Text(hint, style: myAppColors.text4.font_12),
          Expanded(
            child: CupertinoTextField(
              controller: textCtrl,
              textAlign: TextAlign.end,
              style: myAppColors.white.font_16,
              placeholder: 'input',
              placeholderStyle: myAppColors.text.font_12,
              padding: EdgeInsets.zero,
              onTap: onTap,
              readOnly: onTap != null,
              decoration: const BoxDecoration(
                color: Colors.transparent,
              ),
              onChanged: (value) {
                controller.buttonEnbale();
              },
            ),
          ),
        ],
      ),
    );
  }
}
